import React, { useState } from "react";
import ProForm, { ProFormText, ProFormRadio, ProFormTextArea } from "@ant-design/pro-form";
import MusicAPI from '@/services/ant-design-pro/music';
import { Modal, message, Image, Space } from 'antd'
import { ArrowRightOutlined } from '@ant-design/icons';
import { connect } from 'dva'

import UploadImg from '@/components/UploadImg'
import No_head from '../../../../assets/image/no_head.jpg'
import m_config from '@/config/config'

const { addSinger, updateSinger } = MusicAPI
const CreateOrEdit = (props) => {

    const { isModalVisible, isShowModal, actionRef, setUserData, initData, dispatch } = props;
    const [imgFile, setImageFile] = useState(undefined);
    const type = initData === undefined ? "添加" : "编辑";

    initData === undefined ? "" : initData.singer_sex += "";  // 处理性别初始化需要字符串类型的数据
    /**
     * 添加或编辑歌手
     * @param {obj} params 参数
     * @returns 
     */
    const handleSubmit = async (params) => {
        let result;
        if (initData === undefined) { // 添加
            result = await addSinger(params);
        } else { // 编辑
            if (imgFile === undefined) {
                let i = 0;
                for (let key in params) {
                    if (params[key] == initData[key]) {
                        i++;
                    }
                }
                if (i >= 3)
                    return message.error("您还未修改数据")
            }

            result = await updateSinger({
                singer: {
                    ...initData,
                    ...params,
                },
                file: imgFile || null
            });
        }

        if (result.status == 'ok') {
            await setUserData();
            actionRef.current.reload();
            message.success(type + "成功");
            dispatch({
                type: 'music/refreshSelect',
                payload: {
                    key: 'Singer',
                    refresh: true
                }
            });
        } else {
            message.error(type + '失败：' + result.data.message);
            console.log(result.data.error);
        }
        isShowModal(false);
    }

    return (<Modal
        title={`${type}歌手`}
        footer={false}
        visible={isModalVisible}
        onCancel={() => isShowModal(false)}
        destroyOnClose={true}>
        {

            <ProForm
                onFinish={(values) => handleSubmit(values)}
                initialValues={initData}
            >
                {
                    initData === undefined ? "" :
                        <Space size={12}>
                            <Image
                                width={150}
                                src={m_config.local + initData.singer_pic + initData.singer_avatar || No_head}
                                onError={(e) => {
                                    e.target.src = No_head;
                                }}
                            />
                            <ArrowRightOutlined />
                            <UploadImg setImgFile={(values) => setImageFile(values)} />
                        </Space>
                }

                <ProFormText
                    name="singer_name"
                    label="歌手名称"
                    placeholder="请输入名称"
                    rules={[
                        { required: true, message: "请输入名称" }
                    ]}
                />

                <ProFormRadio.Group
                    label="性别"
                    name="singer_sex"
                    options={
                        [
                            { label: '男', value: '1' },
                            { label: '女', value: '0' },
                        ]
                    }
                />

                <ProFormTextArea width="xl" label="歌手简介" name="singer_introductory" />
            </ProForm>
        }
    </Modal>);
}

export default connect(({ music }) => ({ music }))(CreateOrEdit);